import React, { useRef,useState } from "react";

// export default function RefTest() {
//   const refInput = useRef()
//   return (
//     <div>
//       <input type="text" ref={refInput}/>
//       <button onClick={() => {refInput.current.focus()}}>focus</button>
//     </div>
//   )
// }

export default function RefTest() {
  const [counter, setCounter] = useState(0);
  const preRef = useRef(null)
  return (
    <div>
      <p>当前值：{counter}</p>
      <p>之前值：{preRef.current}</p>
      <div>
        <button
          onClick={() => {
            preRef.current = counter
            setCounter(x => x+1)
          }}
        >
          click me to add
        </button>
        <button
          onClick={() => {
            preRef.current = counter
            setCounter(x => x-1)
          }}
        >
          click me to sub
        </button>
      </div>
    </div>
  );
}
